
<script>
import { h } from 'vue'
export default {
  name: 'XtxBread',
  // props: {
  //   parentName: {
  //     type: [String, Object],
  //     default: ''
  //   },
  //   parentPath: {
  //     type: String,
  //     default: ''
  //   }
  // }
  render () {
    // 用法:
    // 1.template 标签去除，单文件组件
    // 2.返回值就是组件内容
    // 3.vue2.0的h函数传参进来的，vue3.0的h函数导入进来
    // 4.h函数的第一个参数 标签名字 第二个参数 标签属性名称 第三个参数 子节点
    // 需求
    // 1.创建xtx-bread父容器
    // 2.获取默认插槽内容
    // 3.去除xtx-bread-item组件的内容，应该有render函数来组织
    // 4.遍历插槽中的item，得到一个动态创建的节点，最后一个item不加标签
    // 5.把动态创建的标签渲染在xtx-bread标签中

    // 获取默认插槽内容
    const items = this.$slots.default()
    // 放置标签的数组
    const dymanicItems = []
    items.forEach((item, index) => {
      // 将遍历出来的标签添加到数组中
      dymanicItems.push(item)
      // 使用逻辑判断 让最后一个不要有箭头 其他的加上箭头
      if (index < (items.length - 1)) {
        dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
      }
    })
    return h('div', { class: 'xtx-bread' }, dymanicItems)
  }
}
</script>

<style lang="less">
// 去除scoped的目的是：让xtx-bread的样式作用到xtx-bread-item中去

   .xtx-bread {
    display: flex;
    padding: 25px 10px;
    // ul li:last-child {}
    // 先找到父元素，找到所有的子元素，找到最后一个，判断是不是LI，是就是选中，不是就是无效选择器
    // ul li:last-of-type {}
    // 先找到父元素，找到所有的类型为li的元素，选中最后一个
    &-item {
      a {
        color: #666;
        transition: all 0.4s;
        &:hover {
          color: @xtxColor;
        }
      }
    }
    i {
      font-size: 12px;
      margin-left: 5px;
      margin-right: 5px;
      line-height: 22px;
    }
   }
</style>
